<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>
			/*  1  +  100  取值：选择器被选中几率增加 */
			div#d1{
				width: 50%;
				height: 500px;
				/*颜色色值：透明度：遮罩层：左栏*/
				background: rgba(243, 35, 134, .3);
			}
			/* 最大宽度与最小宽度*/
			div#container{
				background: #f0f0f0;
			}
			.box{
				background: #ffff7f;
				color: #fff;
				width:80%;
				/*最小宽度：设定，不能改变，移动端*/
				min-width: 500px;
				/*最大宽度，设定,宽度最大上限600px，移动端*/
				max-width: 600px;
				/*页面设定最大与最小宽高、约定 移动端宽高比，页面错乱*/
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
	<!-- 最大宽度与最小宽度 ： 
	自适应：编写页面在任何浏览器下正常显示 -->
	<div id="container">
		<div class="box">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis accusantium nesciunt eveniet quidem est, deleniti nam. Magni quae, debitis, ipsam distinctio minus est obcaecati inventore laudantium eum temporibus, necessitatibus id.</div>
	</div>
	</body>
</html>